<template>
  <div class="rmd_goods" v-if="homermd.length">
    <div class="goods-bg">更多推荐</div>
    <van-list finished-text="没有更多了">
      <div style="background-color: transparent;margin-left: 3.2vw;margin-right: 2.5vw;">
        <van-row type="flex" justify="space-around" gutter='9'>
          <van-col v-for="(item, index) in homermd" :key="index" span="12">
            <div @click="gotoinfo(item.id)" class="goods">
              <van-image radius="10px 10px 0 0" height="45.6vw" fit="cover" :src="item.img" />
              <div class="goods-item">
                <div>
                  <span class="van-multi-ellipsis--l2" style="color: black;font-size: 3.46666vw;"
                    v-text="item.name"></span>
                </div>
                <div style="">
                  <span>原价</span>
                  <span style="margin-right: 5%;text-decoration:line-through" v-text="item.original_price"></span>
                  <span>火速抢购</span>
                  <span style="color: red;">￥<span style="font-size: 4.2666vw;font-weight: 700;"
                      v-text="item.selling_price"></span></span>
                </div>
                <div>
                  <span v-text="'剩' + item.stock_num + '库存量'"></span>
                </div>
              </div>
            </div>
          </van-col>
        </van-row>
      </div>
    </van-list>
  </div>
</template>

<script>
  import router from '@/router'
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: 'goOds',
    methods: {
      ...mapMutations(['SET_HOME_RMD']),
      gotoinfo(id) {
        router.push({
          path: '/Details/' + id
        })
      },
      rmd_goods() {
        this.$api.homeData.goods_gethomeinfo(5, 4).then(res => {
          this.SET_HOME_RMD(res.data)
        })
      }
    },
    computed: {
      ...mapState(['homermd'])
    },
    created() {
      this.rmd_goods()
    }
  }
</script>

<style>
  .rmd_goods {
    margin-top: 0.5rem;
  }

  .goods {
    width: 45.6vw;
    margin-bottom: 10px;
  }

  .goods-item {
    background-color: white;
    border-radius: 0 0 10px 10px;
    padding-left: .5625rem;
    padding-top: .1875rem;
    color: #999;
    font-size: 3.1999vw;
  }

  .goods-bg {
    width: 99vw;
    margin-top: auto;
    height: 13.5vw;
    background: url('https://gw.alicdn.com/tfs/TB1xGICsxnaK1RjSZFtXXbC2VXa-750-100.png_.webp');
    background-repeat: no-repeat;
    background-size: cover;
    color: rgba(208, 2, 27, 1);
    text-align: center;
    line-height: 13.5vw;
    font-weight: 700;
    border-left: 0.0625rem solid rgba(208, 2, 27, 1);
    border-right: 0.0625rem solid rgba(208, 2, 27, 1);
  }
</style>
